<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <el-button type="primary" icon="ele-Plus">添加</el-button>
      </template>
      <!-- card body -->
      <el-table :data="tabelData" border stripe>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="品牌名称" prop="tmName" />
        <el-table-column label="品牌logo" prop="tmImg">
          <!-- 表格作用域插槽的作用域数据row代表当前行完整数据 $index代表当前数据的下标 -->
          <template v-slot="{ row }">
            <el-image style="height: 100px" :src="row.tmImg" fit="fill" :lazy="true"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default>
            <el-button type="warning" size="small" icon="ele-Edit">修改</el-button>
            <el-button type="danger" size="small" icon="ele-Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:page-size="pageSize" :page-count="pageCount" :pager-count="5" :page-sizes="[3, 5, 7, 9]"
        v-model:current-page="currentPage" layout="total, prev, pager, next, sizes" />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Trademark",
});
</script>

<script setup lang="ts">
import { ref } from "vue";

//首先模拟一个表格数据
const tabelData = ref([
  {
    id: "001",
    tmName: "小米",
    tmImg: "/static/03.gif",
  },
  {
    id: "002",
    tmName: "苹果",
    tmImg: "/static/03.gif",
  },
  {
    id: "003",
    tmName: "华为",
    tmImg: "/static/03.gif",
  },
]);

//page的数据
//1. 每页条数
const pageSize = ref(3);
//2. 总页数
const pageCount = ref(100);
//3. 当前页码
const currentPage = ref(1);
</script>

<style scoped>

</style>